JavaScript Proxy-mönster: Avancerad objektavlyssning och validering

JavaScript Proxy-objektet är en kraftfull funktion som låter dig avlyssna och anpassa grundläggande objektoperationer. Det möjliggör avancerade metaprogrammeringstekniker, erbjuder större kontroll över objektbeteende och öppnar upp för sofistikerade designmönster. Denna artikel utforskar olika Proxy-mönster, visar deras användningsfall inom validering, avlyssning och dynamisk beteendemodifikation. Vi kommer att dyka ner i praktiska exempel för att visa hur Proxies kan förbättra kodkvalitet, säkerhet och underhållbarhet i dina JavaScript-projekt.

Förstå JavaScript Proxy

I sin kärna omsluter ett Proxy-objekt ett annat objekt (målet) och avlyssnar operationer som utförs på det målet. Dessa avlyssningar hanteras av traps, som är metoder som definierar anpassat beteende för specifika operationer som att hämta en egenskap, ställa in en egenskap eller anropa en funktion. Proxy API tillhandahåller en flexibel och utbyggbar mekanism för att modifiera objekts standardbeteende.

Nyckelbegrepp

• Mål (Target): Det ursprungliga objektet som Proxyn omsluter.
• Hanterare (Handler): Ett objekt som innehåller trap-metoderna. Varje trap motsvarar en specifik operation.
• Traps: Metoder inom hanteraren som avlyssnar och anpassar objektoperationer. Vanliga traps inkluderar get, set, apply och construct.

Skapa en Proxy

För att skapa en Proxy använder du Proxy-konstruktorn, och skickar målobjektet och hanterarobjektet som argument:

            const target = {};
const handler = {
 get: function(target, property, receiver) {
 console.log(`Getting property: ${property}`);
 return Reflect.get(target, property, receiver);
 }
};

const proxy = new Proxy(target, handler);

proxy.name = "John"; // Loggar: Getting property: name
console.log(proxy.name); // Loggar: Getting property: name, sedan John

            

              
                Copy
              
            
          

Vanliga Proxy Traps

Proxies erbjuder en rad traps för att avlyssna olika operationer. Här är några av de vanligaste trapsen:

• get(target, property, receiver): Avlyssnar egenskapåtkomst.
• set(target, property, value, receiver): Avlyssnar egenskapstilldelning.
• has(target, property): Avlyssnar operatorn in.
• deleteProperty(target, property): Avlyssnar operatorn delete.
• apply(target, thisArg, argumentsList): Avlyssnar funktionsanrop.
• construct(target, argumentsList, newTarget): Avlyssnar operatorn new.
• getPrototypeOf(target): Avlyssnar metoden Object.getPrototypeOf().
• setPrototypeOf(target, prototype): Avlyssnar metoden Object.setPrototypeOf().
• isExtensible(target): Avlyssnar metoden Object.isExtensible().
• preventExtensions(target): Avlyssnar metoden Object.preventExtensions().
• getOwnPropertyDescriptor(target, property): Avlyssnar metoden Object.getOwnPropertyDescriptor().
• defineProperty(target, property, descriptor): Avlyssnar metoden Object.defineProperty().
• ownKeys(target): Avlyssnar metoderna Object.getOwnPropertyNames() och Object.getOwnPropertySymbols().

Proxy-mönster

Låt oss nu utforska några praktiska Proxy-mönster och deras tillämpningar:

1. Valideringsproxy

En valideringsproxy upprätthåller begränsningar för egenskapstilldelningar. Den avlyssnar set-trapen för att validera det nya värdet innan tilldelningen tillåts fortsätta.

Exempel: Validering av användarinmatning i ett formulär.

            const user = {};

const validator = {
 set: function(target, property, value) {
 if (property === 'age') {
 if (!Number.isInteger(value) || value < 0 || value > 120) {
 throw new Error('Invalid age. Age must be an integer between 0 and 120.');
 }
 }
 target[property] = value;
 return true; // Indikerar framgång
 }
};

const proxy = new Proxy(user, validator);

proxy.name = 'Alice';
proxy.age = 30;

console.log(user);

try {
 proxy.age = 'invalid'; // Kastar ett fel
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

I detta exempel kontrollerar set-trapen om egenskapen age är ett heltal mellan 0 och 120. Om valideringen misslyckas, kastas ett fel, vilket förhindrar att det ogiltiga värdet tilldelas.

Globalt exempel: Detta valideringsmönster är avgörande för att säkerställa dataintegritet i globala applikationer där användarinmatning kan komma från olika källor och kulturer. Till exempel kan validering av postnummer variera avsevärt mellan länder. En valideringsproxy kan anpassas för att stödja olika valideringsregler baserat på användarens plats.

            const address = {};

const addressValidator = {
 set: function(target, property, value) {
 if (property === 'postalCode') {
 // Exempel: Antar en enkel validering av amerikanskt postnummer
 if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)) {
 throw new Error('Invalid US postal code.');
 }
 }
 target[property] = value;
 return true;
 }
};

const addressProxy = new Proxy(address, addressValidator);

addressProxy.postalCode = "12345-6789"; // Giltigt

try {
 addressProxy.postalCode = "abcde"; // Ogiltigt
} catch(e) {
 console.log(e);
}

// För en mer internationell applikation skulle du använda ett mer sofistikerat valideringsbibliotek
// som kunde validera postnummer baserat på användarens land.

            

              
                Copy
              
            
          

2. Loggningsproxy

En loggningsproxy avlyssnar egenskapåtkomst och tilldelning för att logga dessa operationer. Den är användbar för felsökning och granskning.

Exempel: Loggning av egenskapåtkomst och modifiering.

            const data = {
 value: 10
};

const logger = {
 get: function(target, property) {
 console.log(`Getting property: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 console.log(`Setting property: ${property} to ${value}`);
 target[property] = value;
 return true;
 }
};

const proxy = new Proxy(data, logger);

console.log(proxy.value); // Loggar: Getting property: value, sedan 10
proxy.value = 20; // Loggar: Setting property: value till 20

            

              
                Copy
              
            
          

get- och set-trapsen loggar egenskapen som nås eller modifieras, vilket ger en spårning av objektinteraktioner.

Globalt exempel: I ett multinationellt företag kan loggningsproxies användas för att granska dataåtkomst och modifieringar utförda av anställda på olika platser. Detta är avgörande för efterlevnad och säkerhetsändamål. Tidszoner kan behöva beaktas i loggningsinformationen.

            const employeeData = {
 name: "John Doe",
 salary: 50000
};

const auditLogger = {
 get: function(target, property) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [GET] Accessing property: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [SET] Setting property: ${property} to ${value}`);
 target[property] = value;
 return true;
 }
};

const proxiedEmployee = new Proxy(employeeData, auditLogger);

proxiedEmployee.name; // Loggar tidsstämpel och åtkomst till 'name'
proxiedEmployee.salary = 60000; // Loggar tidsstämpel och modifiering av 'salary'
            

              
                Copy
              
            
          

3. Skrivskyddad Proxy

En skrivskyddad Proxy förhindrar egenskapstilldelning. Den avlyssnar set-trapen och kastar ett fel om ett försök görs att modifiera en egenskap.

Exempel: Göra ett objekt oföränderligt.

            const config = {
 apiUrl: 'https://api.example.com'
};

const readOnly = {
 set: function(target, property, value) {
 throw new Error(`Cannot set property: ${property}. Object is read-only.`);
 }
};

const proxy = new Proxy(config, readOnly);

console.log(proxy.apiUrl);

try {
 proxy.apiUrl = 'https://newapi.example.com'; // Kastar ett fel
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

Varje försök att ställa in en egenskap på proxyn kommer att resultera i ett fel, vilket säkerställer att objektet förblir oföränderligt.

Globalt exempel: Detta mönster är användbart för att skydda konfigurationsfiler som inte bör modifieras vid körning, särskilt i globalt distribuerade applikationer. Att av misstag modifiera konfigurationen i en region kan påverka hela systemet.

            const globalSettings = {
 defaultLanguage: "en",
 currency: "USD",
 timeZone: "UTC"
};

const immutableHandler = {
 set: function(target, property, value) {
 throw new Error(`Cannot modify read-only property: ${property}`);
 }
};

const immutableSettings = new Proxy(globalSettings, immutableHandler);

console.log(immutableSettings.defaultLanguage); // visar 'en'

// Försök att ändra ett värde kommer att kasta ett fel
// immutableSettings.defaultLanguage = "fr"; // kastar Error: Cannot modify read-only property: defaultLanguage
            

              
                Copy
              
            
          

4. Virtuell Proxy

En virtuell Proxy kontrollerar åtkomsten till en resurs som kan vara kostsam att skapa eller hämta. Den kan fördröja skapandet av resursen tills den faktiskt behövs.

Exempel: Lat laddning av en bild.

            const image = {
 display: function() {
 console.log('Displaying image');
 }
};

const virtualProxy = {
 get: function(target, property) {
 if (property === 'display') {
 console.log('Creating image...');
 const realImage = {
 display: function() {
 console.log('Displaying real image');
 }
 };
 target.display = realImage.display;
 return realImage.display;
 }
 return target[property];
 }
};

const proxy = new Proxy(image, virtualProxy);

// Bilden skapas inte förrän display anropas.
proxy.display(); // Loggar: Creating image..., sedan Displaying real image

            

              
                Copy
              
            
          

Det verkliga bildobjektet skapas endast när metoden display anropas, vilket undviker onödig resursförbrukning.

Globalt exempel: Överväg en global e-handelswebbplats som visar produktbilder. Genom att använda en virtuell Proxy kan bilder laddas endast när de är synliga för användaren, vilket optimerar bandbreddsanvändningen och förbättrar sidladdningstiderna, särskilt för användare med långsamma internetanslutningar i olika regioner.

            const product = {
 loadImage: function() {
 console.log("Loading high-resolution image...");
 // Simulerar laddning av en stor bild
 setTimeout(() => {
 console.log("Image loaded");
 this.displayImage();
 }, 2000);
 },
 displayImage: function() {
 console.log("Displaying the image");
 }
};

const lazyLoadProxy = {
 get: function(target, property) {
 if (property === "displayImage") {
 // Istället för att ladda omedelbart, fördröj laddningen
 console.log("Request to display image received. Loading...");
 target.loadImage();
 return function() { /* Intentionally Empty */ }; // Returnera tom funktion för att förhindra omedelbar exekvering
 }
 return target[property];
 }
};

const proxiedProduct = new Proxy(product, lazyLoadProxy);

// Anrop displayImage utlöser den lata laddningsprocessen
proxiedProduct.displayImage();
            

              
                Copy
              
            
          

5. Återkallningsbar Proxy

En återkallningsbar Proxy låter dig återkalla proxyn när som helst, vilket gör den oanvändbar. Detta är användbart för säkerhetskänsliga scenarier där du behöver kontrollera åtkomsten till ett objekt.

Exempel: Bevilja tillfällig åtkomst till en resurs.

            const target = {
 secret: 'This is a secret'
};

const handler = {
 get: function(target, property) {
 console.log('Accessing secret property');
 return target[property];
 }
};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.secret); // Loggar: Accessing secret property, sedan This is a secret

revoke();

try {
 console.log(proxy.secret); // Kastar ett TypeError
} catch (error) {
 console.error(error.message); // Loggar: Cannot perform 'get' on a proxy that has been revoked
}

            

              
                Copy
              
            
          

Metoden Proxy.revocable() skapar en återkallningsbar proxy. Att anropa funktionen revoke() gör proxyn oanvändbar, vilket förhindrar ytterligare åtkomst till målobjektet.

Globalt exempel: I ett globalt distribuerat system kan du använda en återkallningsbar proxy för att bevilja tillfällig åtkomst till känslig data till en tjänst som körs i en specifik region. Efter en viss tid kan proxyn återkallas för att förhindra obehörig åtkomst.

            const sensitiveData = {
 apiKey: "SUPER_SECRET_KEY"
};

const handler = {
 get: function(target, property) {
 console.log("Accessing sensitive data");
 return target[property];
 }
};

const { proxy: dataProxy, revoke: revokeAccess } = Proxy.revocable(sensitiveData, handler);

// Tillåt åtkomst i 5 sekunder
setTimeout(() => {
 revokeAccess();
 console.log("Access revoked");
}, 5000);

// Försök att komma åt data
console.log(dataProxy.apiKey); // Loggar API-nyckeln

// Efter 5 sekunder kommer detta att kasta ett fel
setTimeout(() => {
 try {
 console.log(dataProxy.apiKey); // Kastar: TypeError: Cannot perform 'get' on a proxy that has been revoked
 } catch (error) {
 console.error(error);
 }
}, 6000);

            

              
                Copy
              
            
          

6. Typkonverteringsproxy

En typkonverteringsproxy avlyssnar egenskapåtkomst för att automatiskt konvertera det returnerade värdet till en specifik typ. Detta kan vara användbart när man arbetar med data från olika källor som kan ha inkonsekventa typer.

Exempel: Konvertera strängvärden till nummer.

            const data = {
 price: '10.99',
 quantity: '5'
};

const typeConverter = {
 get: function(target, property) {
 const value = target[property];
 if (typeof value === 'string' && !isNaN(Number(value))) {
 return Number(value);
 }
 return value;
 }
};

const proxy = new Proxy(data, typeConverter);

console.log(proxy.price + 1); // Loggar: 11.99 (nummer)
console.log(proxy.quantity * 2); // Loggar: 10 (nummer)

            

              
                Copy
              
            
          

get-trapen kontrollerar om egenskapens värde är en sträng som kan konverteras till ett nummer. Om så är fallet konverterar den värdet till ett nummer innan det returneras.

Globalt exempel: När man hanterar data som kommer från API:er med olika formateringskonventioner (t.ex. olika datumformat eller valutasymboler), kan en typkonverteringsproxy säkerställa datakonsistens i din applikation, oavsett källa. Till exempel, hantera olika datumformat och konvertera dem alla till ISO 8601-format.

            const apiData = {
 dateUS: "12/31/2023",
 dateEU: "31/12/2023"
};

const dateFormatConverter = {
 get: function(target, property) {
 let value = target[property];
 if (property.startsWith("date")) {
 // Försök att konvertera både amerikanska och EU-datumformat till ISO 8601
 if (property === "dateUS") {
 const [month, day, year] = value.split("/");
 value = `${year}-${month}-${day}`;
 } else if (property === "dateEU") {
 const [day, month, year] = value.split("/");
 value = `${year}-${month}-${day}`;
 }
 return value;
 }
 return value;
 }
};

const proxiedApiData = new Proxy(apiData, dateFormatConverter);

console.log(proxiedApiData.dateUS); // Utdata: 2023-12-31
console.log(proxiedApiData.dateEU); // Utdata: 2023-12-31
            

              
                Copy
              
            
          

Bästa metoder för att använda Proxies

• Använd Proxies omdömesfullt: Proxies kan lägga till komplexitet i din kod. Använd dem endast när de ger betydande fördelar, såsom förbättrad validering, loggning eller kontroll över objektbeteende.
• Överväg prestanda: Proxy traps kan medföra overhead. Profilera din kod för att säkerställa att Proxies inte negativt påverkar prestandan, särskilt i prestandakritiska sektioner.
• Hantera fel elegant: Se till att dina trap-metoder hanterar fel på lämpligt sätt, och tillhandahåller informativa felmeddelanden när det behövs.
• Använd Reflect API: Reflect API tillhandahåller metoder som speglar standardbeteendet för objektoperationer. Använd Reflect-metoder inom dina trap-metoder för att delegera till det ursprungliga beteendet när det är lämpligt. Detta säkerställer att dina traps inte bryter befintlig funktionalitet.
• Dokumentera dina Proxies: Dokumentera tydligt syftet och beteendet för dina Proxies, inklusive de traps som används och de begränsningar som upprätthålls. Detta kommer att hjälpa andra utvecklare att förstå och underhålla din kod.

Slutsats

JavaScript Proxies är ett kraftfullt verktyg för avancerad objektmanipulation och avlyssning. Genom att förstå och tillämpa olika Proxy-mönster kan du förbättra kodkvalitet, säkerhet och underhållbarhet. Från att validera användarinmatning till att kontrollera åtkomst till känsliga resurser, erbjuder Proxies en flexibel och utbyggbar mekanism för att anpassa objektbeteende. När du utforskar möjligheterna med Proxies, kom ihåg att använda dem omdömesfullt och dokumentera din kod noggrant.

De tillhandahållna exemplen visar hur man använder JavaScript Proxies för att lösa verkliga problem i en global kontext. Genom att förstå och tillämpa dessa mönster kan du skapa mer robusta, säkra och underhållbara applikationer som möter behoven hos en mångsidig användarbas. Kom ihåg att alltid överväga de globala implikationerna av din kod och anpassa dina lösningar till de specifika kraven för olika regioner och kulturer.